<template>
    <div class="main-content">
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem href="#">账号</BreadcrumbItem>
                <BreadcrumbItem href="#">密码安全</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <Row>
                <Col span="10">
                <Form ref="passwordRule" :label-width="120" :model="passwordRule" :rules="ruleCustom">
                    <Form-item label="输入原始密码:" prop="old_passwd">
                        <i-input v-model="passwordRule.old_passwd" :value.sync="passwordRule.old_passwd"></i-input>
                    </Form-item>
                    <Form-item label="输入新密码:" prop="new_passwd">
                        <i-input v-model="passwordRule.new_passwd" type="password"></i-input>
                    </Form-item>
                    <Form-item label="确认新密码:" prop="confirm_passwd">
                        <i-input v-model="passwordRule.confirm_passwd" type="password"></i-input>
                    </Form-item>
                    <Form-item>
                        <i-button type="primary" size="large" @click="handleSubmit('passwordRule')">提交</i-button>
                        <i-button type="ghost" size="large" @click="handleReset('passwordRule')" style="margin-left: 8px">重置</i-button>
                    </Form-item>
                </Form>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    import * as types from '../../store/mutation-types';
    export default {
        data() {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (value.length < 6) {
                    callback(new Error('密码建议使用字母加数字，且长度不少于6位数'));
                } else {
                    if (this.passwordRule.confirm_passwd !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.passwordRule.validateField('confirm_passwd');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.passwordRule.new_passwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                passwordRule: {
                    old_passwd: '',
                    new_passwd: '',
                    confirm_passwd: ''
                },
                ruleCustom: {
                    old_passwd: [{
                        required: true,
                        message: '请输入原始密码',
                        trigger: 'blur'
                    }],
                    new_passwd: [{
                        required: true,
                        validator: validatePass,
                        trigger: 'blur'
                    }],
                    confirm_passwd: [{
                        required: true,
                        validator: validatePassCheck,
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            logout() {
                this.$store.commit(types.LOGOUT);
                this.$router.push({
                    path: '/'
                });
            },
            postData() {
                let vm = this;
                let params = {
                    type: 'post',
                    url: 'token/modifiedPassword',
                    params: {
                        old_passwd: vm.passwordRule.old_passwd,
                        new_passwd: vm.passwordRule.new_passwd,
                        confirm_passwd: vm.passwordRule.confirm_passwd
                    },
                    sCallback(data) {
                        if (data.code === 110002) {
                            vm.$Message.error('原始密码有误!');
                        } else {
                            vm.logout();
                            vm.$Message.success('密码修改成功,请重新登陆!', 10);
                        }
                    },
                    eCallback(e) {
                        vm.$Message.error(e.data);
                    }
                };
                vm.http.request(params);
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Modal.confirm({
                            title: '确认修改密码？',
                            content: '即将修改密码，修改后请牢记新密码',
                            onOk: () => {
                                this.postData()
                            },
                            onCancel: () => {}
                        })
                        // this.postData();
                    } else {
                        this.$Message.error('请重新检查信息！！');
                    }
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>
<style lang="stylus">
</style>

